<template>
  <div class="intro">
  <div class="weui-cells__title">诊所全名</div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="..." v-model="clinic.fullname">
        </div>
      </div>
    </div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="weui-uploader">
            <div class="weui-uploader__hd">
              <p class="weui-uploader__title">诊所logo</p>
            </div>
            <div class="weui-uploader__bd">
              <ul class="weui-uploader__files" v-if="src || clinic.logo">
                <li class="weui-uploader__file">
                  <img :src="src || 'http://static.qy-clinic.com/' + clinic.logo" class="weui-uploader__img"/>
                </li>
              </ul>
              <div class="weui-uploader__input-box">
                <input @change="uploadFile" class="weui-uploader__input" type="file" accept="image/*">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="weui-cells__title">背景简介</div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <textarea
            class="weui-textarea"
            placeholder="..."
            rows="5"
            v-model="clinic.summary"
            maxlength="255"></textarea>
        </div>
      </div>
    </div>
    <div class="weui-cells__title">诊所地址</div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="格式：经度,维度" v-model="clinic.address">
        </div>
      </div>
    </div>
    <div class="weui-cells__title">预约电话</div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" type="tel" placeholder="..." v-model="clinic.tel">
        </div>
      </div>
    </div>
    <div class="weui-btn-area" v-if="clinic.key">
      <a
        :class="'weui-btn weui-btn_primary' + (disabled ? ' weui-btn_loading' : '')"
        href="javascript:"
        @click="handleUpdate">
        <i class="weui-loading" v-if="disabled"></i>更新</a>
      <router-link :to="{name: 'home'}" class="weui-btn weui-btn_default">返回</router-link>
    </div>
    <input type="hidden" id="fullname"  emptyTips="请填写诊所全名">
    <input type="hidden" id="logo"  emptyTips="请上传诊所logo">
    <input type="hidden" id="summary"  emptyTips="请填写诊所背景信息">
    <input type="hidden" id="address"  emptyTips="请填写诊所地址信息">
    <input type="hidden" id="tel"  emptyTips="请填写诊所电话">
  </div>
</template>

<script>
  import { validate } from '@/util/index';

  export default {
    name: 'Intro',

    data() {
      return {
        src: '',
        disabled: false,
        clinic: {}
      };
    },

    methods: {
      uploadFile(e) {
        const file = e.target.files[0];
        const data = new FormData();
        const reader = new FileReader();
        const loading = this.$weui.loading();

        reader.readAsDataURL(file);
        reader.onload = (e) => {
          this.src = e.target.result;
        }
        data.append('file', file);
        this.$axios
          .post('http://api.qy-clinic.com/upload', data)
          .then(res => {
            this.clinic.logo = res.data.savePath;
            loading.hide();
          })
          .catch(err => {
            this.$weui.alert(err.message);
            loading.hide();
          });
      },

      handleUpdate() {
        const fields = ['fullname', 'logo', 'summary', 'address', 'tel'];
        const clinic = this.clinic;
        const isValidated = validate(this.$weui.form, clinic, fields);

        if (this.disabled || !isValidated) {
          return false;
        }
        this.disabled = true;
        this.$axios
          .put(`http://api.qy-clinic.com/intro/${clinic.key}`, clinic)
          .then(() => {
            this.disabled = false;
            this.$weui.toast('更新成功', 1500);
          })
          .catch(() => {
            this.disabled = false;
            this.$weui.alert('更新失败');
          });
      }
    },

    mounted() {
      const { key } = this.$route.params;

      this.$axios
        .get(`http://api.qy-clinic.com/intro/${key}`)
        .then(({ data }) => {
          this.clinic = data;
        });
    }
  }
</script>

<style lang="scss" scoped>
.weui-uploader__img {
  width: 100%;
  height: 100%;
}
</style>
